/* 旋转 */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* 透明度渐变 */
@-webkit-keyframes crossfade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes crossfade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* 上移 下移 左移 右移 */
@-webkit-keyframes moveUp{
  0%{-webkit-transform: translateY(0);}
  99%{opacity: 1;}
  100%{-webkit-transform: translateY(-100%);opacity: 0;}
}
@keyframes moveUp{
  0%{transform: translateY(0);}
  99%{opacity: 1;}
  100%{transform: translateY(-100%);opacity: 0;}
}

@-webkit-keyframes moveLeft{
  0%{-webkit-transform: translateX(0);}
  99%{opacity: 1;}
  100%{-webkit-transform: translateX(-100%);opacity: 0;}
}
@keyframes moveRight{
  0%{transform: translateXs(0);}
  99%{opacity: 1;}
  100%{transform: translateX(-100%);opacity: 0;}
}